<html>
<head>
    <meta charset="utf-8">
    <title>旋转相册</title>
    <style>
        body {
            width: 100%;
            margin: 0;
            overflow: hidden;
            background: hsla(0, 5%, 5%, 1);
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-image: linear-gradient(to right top, hsla(0, 5%, 15%, 0.5), hsla(0, 5%, 5%, 1));
            background-image: -moz-linear-gradient(to right top, hsla(0, 5%, 15%, 0.5), hsla(0, 5%, 5%, 1));
        }

        *, html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

        .page {
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: relative;
            /* background:  radial-gradient(circle farthest-side at left top, #60aeff, #4b6ae9) */
        }

        .content {
            width: 200px;
            height: 200px;
            margin: 360px auto;
            transform-style: preserve-3d;
            transform: rotateY(20deg);
            animation: rotate 5s infinite;
            animation-timing-function: linear;
        }

        .content > div {
            width: 200px;
            height: 200px;
            position: absolute;
            border: 1px solid #ccc;
        }

        .content > .inDiv {
            width: 100px;
            height: 100px;
            top: 50px;
            left: 50px;
        }

        .content .front {
            transform: translateZ(200px);
        }

        .content .back {
            transform: translateZ(-200px);
        }

        .content .top {
            transform: rotateX(90deg) translateZ(200px);
        }

        .content .bottom {
            transform: rotateX(-90deg) translateZ(200px);
        }

        .content .left {
            transform: rotateY(90deg) translateZ(200px);
        }

        .content .right {
            transform: rotateY(-90deg) translateZ(200px);
        }

        .content .inFront {
            transform: translateZ(50px);
        }

        .content .inBack {
            transform: translateZ(-50px);
        }

        .content .inTop {
            transform: rotateX(90deg) translateZ(50px);
        }

        .content .inBottom {
            transform: rotateX(-90deg) translateZ(50px);
        }

        .content .inLeft {
            transform: rotateY(90deg) translateZ(50px);
        }

        .content .inRight {
            transform: rotateY(-90deg) translateZ(50px);
        }

        @keyframes rotate {
            from {
                transform: rotateX(0deg) rotateY(0deg);
            }
            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }

    </style>
</head>
<body>
<canvas id="canv"></canvas>
<div class="page">
    <div class="content">
        <div class="top">
            <img src="./img/2.png" alt="">
        </div>
        <div class="bottom">
            <img src="./img/1-1.jpg" alt="">
        </div>
        <div class="left">
            <img src="./img/6.png" alt="">
        </div>
        <div class="right">
            <img src="./img/3.jpg" alt="">
        </div>
        <div class="front">
            <img src="./img/4.jpg" alt="">
        </div>
        <div class="back">
            <img src="./img/5.jpg" alt="">
        </div>
        <div class="inTop inDiv">
            <img src="./img/6.jpg" alt="">
        </div>
        <div class="inBottom inDiv">
            <img src="./img/5-1.jpg" alt="">
        </div>
        <div class="inLeft inDiv">
            <img src="./img/2-png.jpg" alt="">
        </div>
        <div class="inRight inDiv">
            <img src="./img/3-1.jpg" alt="">
        </div>
        <div class="inFront inDiv">
            <img src="./img/4-1.jpg" alt="">
        </div>
        <div class="inBack inDiv">
            <img src="./img/5-1.jpg" alt="">
        </div>

    </div>
</div>


<script>
    window.requestAnimFrame = (function () {
        return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function (callback) {
                window.setTimeout(callback, 1000 / 60);
            };
    })();
    var c = document.getElementById('canv');
    var $ = c.getContext('2d');
    var w = c.width = window.innerWidth;
    var h = c.height = window.innerHeight;
    var _w = w * 0.5;
    var _h = h * 0.5;
    var arr = [];
    var cnt = 0;

    window.addEventListener('load', resize);
    window.addEventListener('resize', resize, false);

    function resize() {
        c.width = w = window.innerWidth;
        c.height = h = window.innerHeight;
        c.style.position = 'absolute';
        c.style.left = (window.innerWidth - w) *
            .01 + 'px';
        c.style.top = (window.innerHeight - h) *
            .01 + 'px';
    }

    function anim() {
        cnt++;
        if (cnt % 6) draw();
        window.requestAnimFrame(anim);
    }

    anim();

    function draw() {

        var splot = {
            x: rng(_w - 900, _w + 900),
            y: rng(_h - 900, _h + 900),
            r: rng(20, 80),
            spX: rng(-1, 1),
            spY: rng(-1, 1)
        };

        arr.push(splot);
        while (arr.length > 100) {
            arr.shift();
        }
        $.clearRect(0, 0, w, h);

        for (var i = 0; i < arr.length; i++) {

            splot = arr[i];
            $.fillStyle = rndCol();
            $.beginPath();
            $.arc(splot.x, splot.y, splot.r, 0, Math.PI * 2, true);
            $.shadowBlur = 80;
            $.shadowOffsetX = 2;
            $.shadowOffsetY = 2;
            $.shadowColor = rndCol();
            $.globalCompositeOperation = 'lighter';
            $.fill();

            splot.x = splot.x + splot.spX;
            splot.y = splot.y + splot.spY;
            splot.r = splot.r * 0.96;
        }
    }

    function rndCol() {
        var r = Math.floor(Math.random() * 180);
        var g = Math.floor(Math.random() * 60);
        var b = Math.floor(Math.random() * 100);
        return "rgb(" + r + "," + g + "," + b + ")";
    }

    function rng(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
</script>
</body>
</html>
